@import shared.VarTool
@import tool.soft.PcaSoft
@(missionId: Int)(implicit request: RequestHeader,messages: Messages)
	@main(s"${messages("projectDetails")}-" +messages(PcaSoft.nameStr))("allMission", "") {

		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">

		<link rel="stylesheet" media="screen" href="@routes.Assets.at("jquery-minicolors/jquery.minicolors.css")">

		<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/filter-control/my-bootstrap-table-filter-control.js")" type="text/javascript"></script>

		<script src="@routes.Assets.at("jquery-minicolors/jquery.minicolors.js")" type="text/javascript"></script>

		<style>
				.genome-pre {
					white-space: pre-wrap;
					word-wrap: break-word;
					border: 0px solid #ccc;
					background-color: white;
				}

				select:not([multiple]) {
					-webkit-appearance: none;
					-moz-appearance: none;
					background-position: right 50%;
					background-repeat: no-repeat;
					background-image: url();
					padding: .5em;
					padding-right: 1.5em
				}

				.fr {
					float: right;
				}

				.base-info .item .title span {
					display: inline-block;
					border-left: 2px solid #0b8af4;
					font-size: 14px;
					color: #333;
					padding-left: 10px;
				}

				.photo span {
					display: block;
					width: 92px;
					height: 92px;
				}

				.photo img {
					width: 100%;
					height: 100%;
				}

				tr > td {
					padding-top: 10px !important;
					padding-bottom: 10px !important;
				}

				.fglefttitle {
					font-size: 30px;
					font-weight: lighter;
					color: #A2A2A2;
				}

				#row-main {
					overflow-x: hidden;
				}

				#content {
					transition: width 0.3s ease;
				}

				#sidebar {
					transition: margin 0.3s ease;
				}

				.collapsed {
					display: none;
				}

		</style>
		<div class="page-content">

			<div class="row">

				<div class="col-md-12">
					<div id="form_wizard_1" class="portlet light profile-sidebar-portlet bordered">

						<div class="portlet-title">
							<div class="item">
								<div class="title clear">
									<a href="@routes.MissionController.missionManageBefore">@messages("myTasks")</a> /
									<a href="@routes.SoftController.pcaBefore">@messages(PcaSoft.nameStr)</a> /
									<span>@messages("projectDetails")</span>
								</div>
							</div>
							<div class="caption">
							</div>
						</div>

						<div class="portlet-body form">

							<div class="row">

								<div class="col-sm-6">

									<h4>@messages("projectInformation")</h4>

									<form class="form-horizontal" role="form" id="mission">
										<div class="form-body">

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">@messages("taskName"):</label>
														<div class="col-md-4">
															<p class="form-control-static" id="missionName">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">@messages("moduleUtilized"):</label>
														<div class="col-md-4">
															<p class="form-control-static" id="kind">  </p>
														</div>
														<label class="control-label col-md-2">@messages("taskState"):</label>
														<div class="col-md-4">
															<p class="form-control-static" id="state">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">@messages("startTime"):</label>
														<div class="col-md-4">
															<p class="form-control-static" id="startTime">  </p>
														</div>
														<label class="control-label col-md-2">@messages("endTime"):</label>
														<div class="col-md-4">
															<p class="form-control-static" id="endTime">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">@messages("inputFile"):</label>
														<div class="col-md-10">
															<p class="form-control-static" id="input">  </p>

														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">@messages("parameterTable"):</label>
														<div class="col-md-6" >
															<table class="display table table-bordered" id="argTable" data-pagination="true"
															data-page-list="[10, 25, 50, 100, all]" >
																<thead>
																</thead>
															</table>
															<p class="form-control-static" id="arg">  </p>

														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">@messages("zippedResults"):</label>
														<div class="col-md-4">
															<p class="form-control-static" >
																<a href="@routes.MissionController.downloadResult?missionId=@missionId">
																	<i class="fa fa-download"></i>
																</a>
															</p>
														</div>
													</div>
												</div>
											</div>

										</div>
									</form>

								</div>

								<div class="col-sm-6">

									<h4>@messages("projectResults")</h4>

									<div class="table-responsive">

										<table class="display table table-bordered" id="table" data-pagination="true"
										data-page-list="[10, 25, 50, 100, all]" >
											<thead>

												<tr class="myTr">

												</tr>

											</thead>
										</table>

									</div>

								</div>

							</div>

							<hr>

							<div class="row pca" id="row-main">

								<div id="root"></div>

							</div>


						</div>

					</div>
				</div>
			</div>

			<div id="viewModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog" style="width: 1000px">
					<div class="modal-content">
						<div class="modal-header bg-primary">
							<h4 class="modal-title">
								<i class="fa fa-eye"></i>
								<span id="lblAddTitle" style="font-weight: bold">@{messages("fileView")}(<span id="fileName"></span>)</span>
							</h4>
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
								<i class="fa fa-remove"></i>
							</button>
						</div>

						<div class="portlet-body form" style="margin-left: 15px;
							margin-right: 15px;
							margin-bottom: 15px">

							<div class="table-responsive">

								<table class="display table table-bordered" id="table" data-click-to-select="true"
								data-page-list="[10, 25, 50, 100, all]" >
									<thead>

										<tr class="myTr">

										</tr>

									</thead>
								</table>

							</div>

						</div>

					</div>
				</div>
			</div>


		</div>

		<script>

				var missionId = "@missionId"

				Header.selectHeader("mission")


				$(function () {
					Tool.fileInput
					PcaResult.init

				})
		</script>


	}
